<template>
	<view class="body-view d-flex d-c" style="background-color: #ffffff;">
		<!--导航和状态栏-->
		<view class="state-navigation" style="background: none;z-index: 5;">
		    <view class="slim_header_navigation d-flex a-center j-center">
		        <view class="left_box" @tap="goBack">
		            <image src="/static/center/back-white.png" class="back"></image>
		        </view>
		        <view class="title" style="color: #ffffff;">红包详情</view>
		        <view class="right_box">
		        </view>
		    </view>
		</view>
		<image class="top-background" src="/static/image/red-envelope-details.png"></image>
		<view class="content-list">
			<scroll-view style="height: calc(100vh - 258rpx);" scroll-y="true" class="scroll-Y">
				<!--头部显示内容-开始-->
				<view class="content-top">
					<view class="content-nickname">{{nickName(dataInfo?.userId,dataInfo?.userName)}}的红包</view>
					<view class="content-remark">{{dataInfo?.remark}}</view>
					<view class="content-self">
						<!--群红包-->
						<template v-if="dataInfo?.type === 1">
							<!--已领取-->
							<template v-if="myState==1">
								<view class="content-self-money d-flex j-center">
									<view class="self-money-number">{{Number(centToYuan(self?.amount)).toFixed(2)}}</view>
									<view class="self-money-unit">元</view>
								</view>
								<view class="content-self-tip d-flex j-center">
									<view class="self-money-front">已存入</view>
									<view class="self-money-after" @tap="goServe">我的零钱</view>
								</view>
							</template>
						</template>	
						<!--个人红包-->
						<template v-if="dataInfo?.type === 2">
							<!--我是发出人-->
							<template  v-if="userData?.id == dataInfo.userId">
								<view class="content-self-money d-flex j-center">
									<view class="self-money-number">{{Number(centToYuan(dataInfo?.amount)).toFixed(2)}}</view>
									<view class="self-money-unit">元</view>
								</view>
							</template>
							<!--我是接收人-->
							<template v-else>
								<view class="content-self-money d-flex j-center">
									<view class="self-money-number">{{Number(centToYuan(dataInfo?.amount)).toFixed(2)}}</view>
									<view class="self-money-unit">元</view>
								</view>
								<view class="content-self-tip d-flex j-center">
									<view class="self-money-front">已存入</view>
									<view class="self-money-after" @tap="goServe">我的零钱</view>
								</view>
							</template>
						</template>	
					</view>
				</view>
				<view style="height: 20rpx;background-color: #f5f5f5;"></view>
				<!--群红包-->
				<template v-if="dataInfo?.type === 1">
					<!--未领取-->
					<template v-if="myState==0">
						<!--未领完-->
						<view v-if="redState==0" class="content-detail">
							已领取{{dataInfo?.redRobRecords.length}}/{{dataInfo?.number}}个<template v-if="userData?.id == dataInfo.userId">，共{{received}}/{{centToYuan(dataInfo?.amount)}}元</template>
						</view>
						<!--已领完-->
						<view v-if="redState==1" class="content-detail">{{dataInfo?.number}}个红包<template v-if="userData?.id == dataInfo.userId">，共{{centToYuan(dataInfo?.amount)}}元</template>，{{showTime}}被抢完</view>
					</template>
					<!--已领取-->
					<template v-if="myState==1">
						<!--未领完-->
						<view v-if="redState==0" class="content-detail">领取{{dataInfo?.redRobRecords.length}}/{{dataInfo?.number}}个<template v-if="userData?.id == dataInfo.userId">，共{{received}}/{{centToYuan(dataInfo?.amount)}}元</template></view>
						<!--已领完-->
						<view v-if="redState==1" class="content-detail">{{dataInfo?.number}}个红包<template v-if="userData?.id == dataInfo.userId">，共{{centToYuan(dataInfo?.amount)}}元</template>，{{showTime}}被抢完</view>
					</template>
				</template>
				<!--个人红包红包-->
				<template v-if="dataInfo?.type === 2">
					<!--未领取-->
					<template v-if="dataInfo?.redRobRecords.length ===0">
						<view class="content-detail">红包金额{{centToYuan(dataInfo?.amount)}}元，等待对方领取</view>
					</template>
					<!--已领取-->
					<template v-else>
						<!--我是发出人-->
						<template  v-if="userData?.id == dataInfo.userId">
							<view class="content-detail">{{dataInfo?.number}}个红包共{{centToYuan(dataInfo?.amount)}}元</view>
						</template>
					</template>
				</template>
				<!--头部显示内容-结束-->
				<view v-for="item in dataInfo?.redRobRecords" class="content-list-row d-flex a-center">
						<userhead
						    width="100"
						    height="100"
						    :saveKey="item.userId"
						    :src="item.userPhoto"
							:isVip="item.isVip"
						/>
						<view class="list-row-info">
							<view class="row-info-top d-flex a-center j-between">
								<view class="info-top-left" :class="{isVip:item.isVip}">{{nickName(item?.userId,item?.userName)}}</view>
								<view class="info-top-right d-flex">
									<view class="top-right-number">{{Number(centToYuan(item?.amount)).toFixed(2)}}</view>
									<view class="top-right-unit">元</view>
								</view>
							</view>
							<view class="row-info-bottom d-flex a-center j-between">
								<view class="info-bottom-left">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('MM/DD HH:mm:ss')}}</view>
								<!--群红包-->
								<template v-if="dataInfo.type === 1">
									<view v-if="redState==1&&fortuneUserId==item.userId" class="info-bottom-right d-flex a-center">
										<image class="bottom-right-icon" src="/static/image/crown.png"></image>
										<view class="bottom-right-text">手气最佳</view>
									</view>
								</template>
							</view>
						</view>
						<view class="list-row-divider"></view>
				</view>
				<view style="height: 60rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="tsx">
import { nextTick, ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryRedByCode } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import { centToYuan } from "@/utils/format";
import userhead from "@/components/userhead.vue";
import moment from 'moment';
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
const goBack = () => {
    uni.navigateBack();
};
const dataInfo:any = ref()
const self:any = ref()
const scrollHeight = ref(0)
const fortuneUserId = ref("")//手气最好的用户id
onLoad((options:any) => {
	let redId = options.redId;
	let params = {
		redId:redId
	}
	
	queryRedByCode(params).then((res:any) => {
		if(res.success){
			dataInfo.value = res.data;
			countState()
			
			//获取节点的高度
			/*
			nextTick(()=>{
				uni.createSelectorQuery().select('#content-list').boundingClientRect().exec((ret)=>{
					scrollHeight.value = ret[0].height
				});
				
			})
			*/
			//计算多久抢完
			countTime()
		}
	})
	
})
//领取状态 0：未领，1：已领
const myState = ref(0)
//红包状态 0: 未领完，1：已领完
const redState = ref(0)
//计算红包状态
const countState = () =>{
	
	let selfs = dataInfo.value.redRobRecords.filter((item:any) => item.userId == userData.id);
	if(selfs.length>0){
		myState.value = 1
		self.value = selfs[0];
	}else{
		myState.value = 0
	}
	if(dataInfo.value.redRobRecords.length<dataInfo.value.number){
		redState.value = 0
	}else{
		redState.value = 1
	}
	//计算出手气最好的用户
	if(dataInfo.value.redRobRecords.length>0){
		const maxAmountNode = dataInfo.value.redRobRecords.reduce((maxNode:any, currentNode:any) => {
		  return (currentNode.amount > maxNode.amount) ? currentNode : maxNode;  
		}); 
		fortuneUserId.value = maxAmountNode.userId
	}
	//个人红包
	if(dataInfo.value.type === 2){
		//我为领取人
		if(dataInfo.value.userId == userData.id){
			//已领完
			if(redState.value==1){
				let key = dataInfo.value.redId + userData.id
				uni.setStorageSync(key , 1);
			}
		}
	}
}
//计算抢完时间
const showTime = ref()
const countTime = () => {
	//console.log().s
	let sendTime = dataInfo.value.createTime
	if(dataInfo.value.redRobRecords.length>0){
		let robTime = dataInfo.value.redRobRecords[0].createTime
		
		// 创建两个Moment对象  
		const moment1 = moment(sendTime, "YYYY-MM-DD HH:mm:ss");  
		const moment2 = moment(robTime, "YYYY-MM-DD HH:mm:ss");  
		  
		// 计算两个时间之间的差异（以毫秒为单位）  
		const diffInMillis = Math.abs(moment2.diff(moment1));  
		  
		// 将差异转换为秒  
		const diffInSeconds = Math.ceil(diffInMillis / 1000);  
		if(diffInSeconds<60){
			showTime.value = diffInSeconds + '秒'
		}
		if(diffInSeconds>=60&&diffInSeconds<3600){
			showTime.value = (diffInSeconds/60).toFixed(0) + '分钟'
		}
		if(diffInSeconds>=3600){
			showTime.value = (diffInSeconds/3600).toFixed(0) + '小时'
		}
	}
}
//计算领取金额
const received = computed(() => {
	const sum = dataInfo.value?.redRobRecords.reduce((accumulator:number, currentValue:any) => accumulator + currentValue.amount, 0);
	return centToYuan(sum)
});
const IM_STORE = imStore();
const nickName = (userId:string,nick:string) => {
	let remark = null;
	let nameCard = null;
	IM_STORE.friends.forEach((f: any) => {
		if (f.userID === userId) {
			remark = f.remark;
		}
	});
	let type  = IM_STORE?.conversation?.type;
	if (type === "GROUP") {
		let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
		if(userData?.nameCard !='')nameCard = userData?.nameCard
	}
	return remark || nameCard || nick;
};
const goServe = () => {
	uni.navigateTo({
	    url: `/pages/serve/serve`,
	});
}
</script>

<style lang="scss" scoped>
@import "./redDetails.scss";
</style>
